<template>
	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="page-content">
			<div class="player">
				<d-player ref="player" @play="play" :logo="logo" :lang="lang" :video="video" :contextmenu="contextmenu" ></d-player>
			</div>


			<div class="nav">
				<h3 class="bt">云南小粒咖啡：来自高原的中国式醇香</h3>
				<p class="time">2018-12-04 15:00:00</p>
				<div class="product">
					<h3>周边产品</h3>
					<div class="iix">
						<div class="list" v-for="item in list" :key="item.id">
							<span><img :src="item.img" alt=""></span>
							<p>{{item.title | filterFun}}</p>
							<p>￥<em v-text="item.price"></em></p>
						</div>
					</div>

				</div>

				<!-- 相关体验 -->
				<div class="latestContents">
					<h3>相关体验</h3>
					<div class="content" v-for="item in items" :key="item.id">
						<div class="nav-l">
							<p v-text="item.text" class="unfold"></p>
							<p><span v-text="item.type"></span><span v-text="item.num"></span></p>
						</div>
						<div class="nav-r">
							<img :src="item.imgSrc" alt="">
						</div>
					</div>
				</div>

				<!-- 大家都在说 -->
				<div class="moreask">
					<h3>大家在说</h3>
					<div class="nav" v-for='item in ask' :key="item.id">
						<img :src="item.imgHead" alt="">
						<span v-text="item.name" class="name"></span>
						<p v-text="item.text"></p>
						<div class="gray">
							<span class="data" v-text="item.data"></span>
							<div>
								<i @click="comment"></i>
								<span class="dz">
									<em class="tx" v-text="item.num" @click="thumbs"></em>
								</span>
							</div>

						</div>
					</div>
				</div>

				<!-- 回复评论模块 -->


			</div>
		</div>

	</div>
</template>

<script>
	import Vue from 'vue'

	import commonHeader from 'common/common-header-transparent'
	import VueDPlayer from 'common/VueDPlayerHls'
	import logoImg from '@/assets/logo.png'



	export default {
		data() {
			return {
				tittle: '',
				ask: [{
						name: '青山不改',
						data: '2011-11-20 15:00:01',
						num: "999",
						text: '嘉峪关在线门户网站提供嘉峪关市、酒泉市概况,地图,旅游,住宿,资讯,娱乐,分类信息,论坛,博客,教育,企业,商家,嘉峪关长城等综合信息。',
						imgHead: require('@/assets/imgs/thr_mg3.png'),
					},
					{
						name: '青山不改',
						data: '2011-11-20 15:00:01',
						num: "999",
						text: '嘉峪关在线门户网站提供嘉峪关市、酒泉市概况,地图,旅游,住宿,资讯,娱乐,分类信息,论坛,博客,教育,企业,商家,嘉峪关长城等综合信息。',
						imgHead: require('@/assets/imgs/thr_mg3.png'),
					},
					{
						name: '青山不改',
						data: '2011-11-20 15:00:01',
						num: "999",
						text: '嘉峪关在线门户网站提供嘉峪关市、酒泉市概况。',
						imgHead: require('@/assets/imgs/thr_mg3.png'),
					},
					{
						name: '青山不改',
						data: '2011-11-20 15:00:01',
						num: "999",
						text: '嘉峪关在线门户网站提供嘉峪关市、酒泉市概况。地图,旅游,住宿,资讯,娱乐,分类信息,论坛,博客,教育,企业,商家,嘉峪关长城等综合信息',
						imgHead: require('@/assets/imgs/thr_mg3.png'),
					}
				],

				list: [{
						img: require('@/assets/imgs/prodect_img2.jpg'),
						title: '混合头有机三七混合头有机三七555',
						price: '99',
						link: ''
					},
					{
						img: require('@/assets/imgs/prodect_img2.jpg'),
						title: '混合头有机三七',
						price: '98',
						link: ''
					}
				],


				items: [{
						text: '《必由之路》第七集速览 解说词  第八集速览',
						type: "体验",
						num: '1000',
						imgSrc: require('@/assets/imgs/thr_mg3.png'),
						link: "www.baidu.com",
					},
					{
						text: '受惠于港珠澳大桥及高铁开通 今年访港6000万',
						type: "体验",
						num: '1000',
						imgSrc: require('@/assets/imgs/thr_mg3.png'),
						link: "www.baidu.com",
					},
					{
						text: '个税专项附加扣除办法有望出炉 首套房政策将明确',
						type: "体验",
						num: '1000',
						imgSrc: require('@/assets/imgs/thr_mg3.png'),
						link: "www.baidu.com",

					}
				],



				data: 0,
				video: {
					quality: [{
						name: '240P',
						url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
					}, {
						name: '360P',
						url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
					}, {
						name: '720P',
						url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
					}],
					pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
					defaultQuality: 1,
					thumbnails: '',
					type: 'hls'
				},


				lang: 'zh-cn',
				logo: '',
				autoplay: false,
				player: null,
				contextmenu: [{
					text: '博客园',
					link: 'http://www.cnblogs.com/maqingyuan/'
				}, {
					text: '博客园',
					link: 'http://www.cnblogs.com/maqingyuan/'
				}, {
					text: '博客园',
					link: 'http://www.cnblogs.com/maqingyuan/'
				}],


			}
		},

		//管道-字符串截取
		filters: {
			filterFun: function(value) {
				if (value && value.length > 10) {
					value = value.substring(0, 10) + '...';
				}
				return value;
			}
		},
		components: {
			commonHeader,
			VueDPlayer,
			'd-player': VueDPlayer
		},
		computed: {
			newdata: function() {
				return this.data + 1
			},

		},
		methods: {
			tohome() {
				this.$router.goBack()
			},
			add() {
				this.data++
			},
			play() {
				console.log('开始播放...')
			},
			comment: function() {
				alert("评论")
			},
			thumbs: function() {
				alert('点赞')
			}



		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	.latestContents {
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 20px 0 20px 10px;
			position: relative;

			&:after {
				position: absolute;
				content: '';
				width: 4px;
				height: 15px;
				border-radius: 2px;
				background: @base-blue-color;
				left: 0;
				right: 0;
				top: 1px;
				margin-left: 0;
				margin-right: auto;
			}

			&:before {
				content: '';
				position: absolute;
				font-weight: bold;
				right: 0px;
				top: 20px;
				color: #e5e5e5;
				height: 20px;
				width: 20px;
				background-size: 100% 100%;
				background-image: url('../../../../assets/imgs/right-jt.svg');

			}
		}

		.content {
			font-size: 14px;
			padding: 0 10px;
			display: flex;
			margin-bottom: 20px;
			justify-content: space-between;

			.nav-l {
				text-align: left;

				p {
					&:first-child {
						line-height: 25px;
					}

					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						display: flex;
						justify-content: space-between;
						color: @base-color-gray;

						span {
							&:last-child {
								position: relative;

								&:after {
									position: absolute;
									content: '';
									width: 16px;
									height: 16px;
									left: -20px;
									top: -1px;
									background: url(../../../../assets/imgs/eye.svg);
									background-size: 100% 100%;
									vertical-align: middle;

								}
							}

						}
					}
				}
			}

			.nav-r {
				margin-left: 25px;
				width: 150px;
				height: 75px;
				border-radius: 5px;

				img {
					width: 111px;
					height: 73px;
					border-radius: 5px;
				}
			}
		}
	}

	.hello {
		width: 750px;
		margin: 0 auto 50px;
	}

	@media only screen and (max-width: 640px) {
		.hello {
			width: 100%;
		}
	}

	.head {
		z-index: 999;
	}

	.player {
		height: 245px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 998;
	}

	.Router {
		background: #ffffff;
	}

	//相关体验
	.page-content {
		padding: 0 10px;
		margin-top: 245px;

		h3 {
			&.bt {

				background: #fff;
				margin-top: 222px;
				font-size: 16px;
				font-weight: bold;
				text-align: left;
			}

			margin-bottom:15px;

		}

		.time {
			text-align: left;
			color: rgb(204, 204, 204);
		}

		.product {
			margin-top: 40px;

			h3 {
				z-index: 997;
				font-size: 14px;
				font-weight: bold;
				text-align: left;
				position: relative;
				text-indent: 4%;
				padding: 0;

				&:after {
					top: 2px;
					position: absolute;
					content: '';
					height: 60%;
					left: 0px;
					vertical-align: middle;
					width: 2.8px;
					background: @base-blue-bg-color;

				}

			}

			div.iix {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-end;

				.list {

					text-align: left;
					width: 100%;
					display: inline-block;
					display: inline-block;
					border: 1px solid #f5f5f5;
					box-shadow: 1px 4px 15px #e2e0e0;
					padding-bottom: 10px;

					p {
						padding: 0 10px;
						margin-top: 10px;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;

						/*根据文本长度剩余部分显示为“···”*/
						em {
							font-weight: bold;
						}
					}

					span {
						display: block;

						img {
							width: 100%;
							height: 157px;
						}

					}


					&:first-child {
						margin-right: 5px;

					}

					&:last-child {
						margin-left: 5px;

					}
				}
			}


		}


	}

	// 大家在说
	.moreask {
		h3 {
			z-index: 997;
			font-size: 14px;
			font-weight: bold;
			text-align: left;
			position: relative;
			text-indent: 4%;
			padding: 0;

			&:after {
				top: 2px;
				position: absolute;
				content: '';
				height: 60%;
				left: 0px;
				vertical-align: middle;
				width: 2.8px;
				background: @base-blue-bg-color;

			}

		}

		.nav {
			width: calc(100% - 50px);
			position: relative;
			text-align: left;
			padding: 10px 0 20px 50px;
			font-size: 14px;

			img {
				position: absolute;
				left: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				vertical-align: middle
			}

			span {
				&.name {
					color: @name-txt-color;
				}
			}

			p {
				line-height: 23px;
				color: @all-txt-color;
			}

			.gray {

				margin-top: 15px;
				border-bottom: 1px solid @border-color;
				color: @base-color-gray;
				font-size: 12px;
				padding-bottom: 30px;
				display: flex;
				justify-content: space-between;

				div {
					display: flex;
					justify-content: space-between;
				}

				i {
					width: 18px;
					height: 18px;
					background-size: 100% 100%;
					display: inline-block;
					background-image: url(../../../../assets/imgs/liaotian.svg);
					padding: 0 20px 0 20px;
					margin-right: 10px;
				}

				.dz {
					width: 16px;
					height: 16px;
					background-size: 100% 100%;
					background-image: url(../../../../assets/imgs/dianzan.svg);
					display: inline-block;
					margin: 0 30px 0 10px;
					position: relative;

					.tx {
						position: absolute;
						top: 0px;
						content: '';
						left: 18px;

					}
				}


			}
		}
	}
</style>